<template>
    <div>
        <ul class="list">
            <li><router-link :style="{color:init=='people'?'red':'#000'}" :to="{name:'people'}" class="a">联系人</router-link></li>
            <li>|</li>
            <li><router-link :style="{color:init=='message'?'red':'#000'}" :to="{name:'message'}" class="a">信息</router-link></li>
        </ul>
        <router-view class="header"></router-view>
    </div>
</template>
<script>
export default {
    name:'user',
    data(){
        return{
            init:'people'
        }
    },
    watch:{
        // "$route":{
        //     handler(newV,oldV){
        //         console.log();
        //         console.log();
        //         this.init=''
        //     },
        //     deep:true,
        //     immediate:true
        // }
    }
}
</script>
<style lang="scss">
    .list{
        list-style:none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        position: fixed;
        font-size: 30px;
        color:cadetblue;
        left: 0;
        bottom: 0;
        right: 0;
        height: 60px;
        background-color: rgb(253, 253, 253);

        li{
            text-align: center;
            text-decoration: none;
        }
    }
    .header{
        position:fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 60px;
        background-color: rgb(199, 221, 233);
    }
    .a{
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
    
</style>